import { Space, Table, Tag, Button } from 'antd';
import React from 'react';
import { useState } from 'react';
const { Column, ColumnGroup } = Table;

interface DataType {
    key: React.Key;
    firstName: string;
    lastName: string;
    age: number;
    address: string;
    tags?: Object[];
    tagColor?: string;
    tagText?: string
}

interface colItem {
    title: string,
    type: string,
    key: number,
    dataIndex: number,
    tagsText: string
}

let data: DataType[] = [
    {
        key: '1',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tagColor: 'red',
        tagText: '12321312'
    },
    {
        key: '2',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tagColor: 'red',
        tagText: '12321312'
    },
    {
        key: '3',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tagColor: 'blue',
        tagText: '12321312'
    },
];

const colList: Object[] = [{
    type: '1',
    key: 0,
    title: 'Frist Name',
    dataIndex: 'firstName'
}, {
    type: '1',
    key: 2,
    title: 'Last Name',
    dataIndex: 'lastName'
}, {
    type: 'type',
    key: 4,
    title: 'taype',
    tags: 'tagColor',
    tagsText: 'tagText'
}]

// const onDelete = (e) =>{
// console.log(e)
//     data = data.map(item => item.key != e.key)
// }

const App: React.FC = () => {
    const [list, setList] = useState(data)
    const onDelete = (e) => {
        setList(list.filter(item => item.key != e.key))
    }
    const add = () => {
        setList([...list, {
            key: '3',
            firstName: 'Joe',
            lastName: 'Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tagColor: 'blue',
            tagText: '12321312'
        },])
    }

    return <div>
        <Button onClick={add} >Add</Button>
        <Table dataSource={list}>
            {
                colList.map((item: any, index: any) => {
                    if (item.type === 'type') {
                        return <Column
                            title={item.title}
                            // dataIndex={item.tags}
                            key={item.key}
                            render={(row: any, col: any, i: number) => (
                                <>
                                    {/* {[{col}]} */}
                                    {col[item.tags] + '-' + row[item.tagsText]}
                                    {/* {item.tags.map((tag:string) => (
                                    <Tag color={item.tag} key={tag}>
                                        {item.dataIndex}
                                    </Tag>
                                ))} */}
                                </>
                            )}
                        />
                    } else {
                        return <Column title={item.title} dataIndex={item.dataIndex} key={item.key} />
                    }
                })
            }
            <Column
                title="Action"
                key="action"
                render={(_: any, record: DataType) => (
                    <Space size="middle">
                        <button>Invite {_.lastName}</button>
                        <button onClick={() => onDelete(_)}>Delete</button>
                    </Space>
                )}
            />
        </Table>
    </div>

}

export default App;